<template>
  <div class="system-edit-user-container">
    <el-dialog :title="(ruleForm.id!==0?'修改':'添加')+'分组'" v-model="isShowDialog" width="600">
      <el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
        <el-form-item label="上级分组">
          <el-cascader
              :options="groups"
              :props="{ label: 'name',value: 'id',checkStrictly: true,emitPath: false }"
              placeholder="请选择上级分组"
              clearable
              class="w100"
              v-model="ruleForm.pid"
          >
            <template #default="{ node, data }">
              <span>{{ data.name }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
        <el-form-item label="分组名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入分组名称" style="width: 100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="分组描述" prop="desc">
          <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入分组描述"
                    maxlength="150"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit"
                     size="default">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {reactive, toRefs, onMounted, defineComponent, ref, unref, getCurrentInstance} from 'vue';
import {ElMessage} from "element-plus";
import {addGroup, getGroup, getGroupOptions, updateGroup} from "/@/api/system/group";

export default defineComponent({
  name: 'systemEditUser',
  props: {
    actType: {
      type: String,
      default: () => 'add'
    }
  },
  setup(prop, {emit}) {
    const formRef = ref<HTMLElement | null>(null);
    const {proxy} = getCurrentInstance() as any;
    const state = reactive({
      isShowDialog: false,
      groups: [],
      ruleForm: {
        id: 0,
        pid: 0,
        name: '',
        desc: '',
        status: 0,
      },
      //表单校验
      rules: {
        name: [
          {required: true, message: "分组名称不能为空", trigger: "blur"}
        ],
        desc: [
          {required: true, message: "分组描述不能为空", trigger: "blur"}
        ],
      },
    });
    // 打开弹窗
    const openDialog = (row?: any) => {
      resetForm();
      getGroupSelect();
      if (row?.id) {
        getGroup({id: row.id}).then((res: any) => {
          const group = res.data;
          state.ruleForm = {
            id: group.id,
            pid: group.pid,
            name: group.name,
            desc: group.desc,
            status: group.status,
          };
        })
      }
      state.isShowDialog = true;
    };
    // 关闭弹窗
    const getGroupSelect = () => {
      getGroupOptions({}).then(res => {
        const groups = {id: 0, name: '主类目', children: []};
        groups.children = proxy.handleTree(res.data, "id", "pid");
        state.groups = new Array(groups) as any;
      })
    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    // 新增
    const onSubmit = () => {
      const formWrap = unref(formRef) as any;
      if (!formWrap) return;
      formWrap.validate((valid: boolean) => {
        if (valid) {
          if (state.ruleForm.id === 0) {
            //添加
            addGroup(state.ruleForm).then(() => {
              ElMessage.success('用户添加成功');
              closeDialog(); // 关闭弹窗
              emit('callback')
            });
          } else {
            //修改
            updateGroup(state.ruleForm).then(() => {
              ElMessage.success('用户修改成功');
              closeDialog(); // 关闭弹窗
              emit('callback')
            });
          }
        }
      });
    };
    // 页面加载时
    onMounted(() => {
      // initTableData();
    });
    const resetForm = () => {
      state.ruleForm = {
        id: 0,
        pid: 0,
        name: '',
        desc: '',
        status: 0,
      }
    };
    return {
      openDialog,
      closeDialog,
      onCancel,
      onSubmit,
      formRef,
      ...toRefs(state),
    };
  },
});
</script>
